<template>
  <view class="details">
    <my-header title="商品详情"></my-header>
    <my-content class="content" v-if="resultStatus">
      <view class="shade" :class="[sku_shade ? 'show' : 'hidden']" @click="unsku" @touchmove.stop.prevent></view>
      <Banner :bannerData="goodsData.goods_images"></Banner>

      <view class="goods_box">
        <view class="goods_info">
          <view class="goods_price">
            <view class="goods_price_box">
              <view class="goods_price_icon">￥</view>
              <view class="goods_price_int">{{ price }}</view>
            </view>
            <view class="goods_price_ext">参考价</view>
          </view>
          <view class="goods_silver">
            <view>{{ exchange_price }}</view>
            <image mode="widthFix" class="gold" src="/static/images/shop/money.png"></image>
          </view>
        </view>
        <view class="goods_title">{{ goodsData.title }}</view>
      </view>

      <view class="goods_detail">
        <view class="goods_detail_header">商品详情</view>
        <rich-text class="goods_content" :nodes="goodsData.content"></rich-text>
      </view>

      <view class="bottom">
        <!-- <view class="contact_box" @click="header('/pages/content/customer')">
						<image mode="heightFix" class="contact" src="http://www.qixdian.cn/upload/20231009/6523f916b6cbb.png"></image>
					</view> -->
        <view class="action_btn">
          <view class="bottom_btn buy_btn" @click="showSku('buy')">直接购买</view>
          <view class="bottom_btn exchange_btn" @click="showSku('exchange')">立即拒提</view>
        </view>
      </view>

      <view class="sku" :class="[skuStatus ? 'show' : 'hidden']" @touchmove.stop.prevent>
        <view class="goods">
          <image :src="image" class="goods_image" @click="previewGoodsImage"></image>
          <view class="goods_info">
            <view class="original_price" v-if="pay_type == 'buy'">
              <!-- <view class="original_price_icon">￥</view> -->
              <view class="original_price_int">{{ price }}</view>
            </view>
            <view class="original_price" v-if="pay_type == 'exchange'">
              <view class="original_price_int">{{ exchange_price }}</view>
              <image mode="widthFix" class="gold" src="https://www.dingxians.cn/images/shop/money.png"></image>
            </view>
            <view class="stock">库存 {{ stock }}</view>
          </view>
          <view class="close">
            <image class="close_image" src="https://www.dingxians.cn/images/shop/close-btn.png" @click="unsku"></image>
          </view>
        </view>
        <view class="specs">
          <view v-for="(item, index) in goodsData.goods_attrs" :key="item.id" class="attr">
            <view class="attr_box">
              <view class="attr_name">{{ item.value }}</view>
              <view class="attr_info none" v-if="!item.select_value_id">请选择{{ item.value }}</view>
            </view>
            <view class="value">
              <view class="value_name" @click="select(value, index, key)" :class="{ active: value.is_selected == true }" v-for="(value, key) in item.leaf" :key="value.id">
                {{ value.value }}
              </view>
            </view>
          </view>
        </view>
        <view class="num_box">
          <view class="num_title">数量</view>
          <view class="num_value">
            <view class="remove_num" @click="remove_num()"></view>
            <view class="num">{{ num }}</view>
            <view class="add_num" @click="add_num()"></view>
          </view>
        </view>
        <view class="btn_group">
          <view class="btn exchange" @click="submit(3)" v-if="pay_type === 'exchange'">立即拒提</view>
          <view class="btn buy" @click="submit(2)" v-if="pay_type === 'buy'">立即支付</view>
        </view>
      </view>

      <view style="visibility: hidden; margin-top: 100rpx">1</view>
    </my-content>
    <!-- #ifdef MP-WEIXIN -->
    <my-alert-dialog ref="download_dialog" title="提示" :showConfirm="false" cancelString="关闭">
      <view class="dialog-content" style="text-align: center; margin: 20rpx 0">
        <!-- <image
          style="width: 300rpx; margin: 0 auto"
          src="https://www.dingxians.cn/upload/user_static/common/down_app.png"
          mode="aspectFit"
        /> -->
        <view>请扫码下载App购买/拒提</view>
      </view>
    </my-alert-dialog>
    <!-- #endif -->
  </view>
</template>

<script>
import Banner from '@/components/Banner/index.vue';
import api from '../../api/index.js';
export default {
  components: {
    Banner
  },
  data() {
    return {
      sku_shade: false,
      goods_id: '',
      goodsData: {
        goods_images: []
      },
      skuStatus: false,
      num: 1, // 购买数量
      pay_type: '',

      goods_sku_id: '',
      price: '',
      exchange_price: '',
      stock: '',
      image: '',
      selectValue: '', //已选规格
      resultStatus: false,
      token: ''
    };
  },
  onLoad(option) {
    this.goods_id = option.id;
    this.getGoods();
  },
  onShow() {
    this.token = uni.getStorageSync('token');
  },

  methods: {
    splitNum(num) {
      return num.split('.');
    },
    unsku() {
      this.sku_shade = false;
      this.skuStatus = false;
    },
    getGoods() {
      uni.showLoading({
        title: '数据加载中'
      });
      api.goods
        .show(this.goods_id)
        .then((res) => {
          uni.hideLoading();
          if (res.code === 200) {
            this.goodsData = res.data;
            this.getDefault();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 添加数量
    add_num() {
      this.num = parseInt(this.num) + 1;
    },
    // 减少数量
    remove_num() {
      if (parseInt(this.num) - 1 <= 0) {
        this.show('最少购买一件哦');
      } else {
        this.num = parseInt(this.num) - 1;
      }
    },
    showSku(type) {
      if (!this.token) {
        this.header('/pages/user/wxlogin');
        return;
      }
      this.skuStatus = true;
      this.sku_shade = true;
      this.pay_type = type;
    },
    // 预览图
    previewGoodsImage() {
      let image = this.goodsData.sku.map((item) => {
        return item.image;
      });
      uni.previewImage({
        current: this.index, // 预览图片的下标
        urls: image // 预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
      });
    },
    // 获取默认规格(第一个sku)或者指定sku商品(从购物车点击商品进来)
    getDefault() {
      var index = 0;
      if (this.goods_sku_id) {
        index = this.goodsDetail.sku.findIndex((item) => {
          return item.id == this.goods_sku_id;
        });
      }

      this.goodsData.goods_attrs.forEach((item) => {
        item.leaf.forEach((value) => {
          JSON.parse(this.goodsData.sku[index].attr_values).map((sku) => {
            if (value.id == sku.v_id) {
              value.is_selected = true; // 选择的属性值
              item.select_value_id = value.id;
              this.selectValue += sku.v + ',';
            }
          });
        });
      });

      this.price = this.goodsData.sku[0].price;
      this.image = this.goodsData.sku[0].image;
      this.stock = this.goodsData.sku[0].stock;
      this.exchange_price = this.goodsData.sku[0].exchange_price;
      this.goods_sku_id = this.goodsData.sku[0].id; // 选择的 sku
      this.selectValue = this.selectValue.substring(0, this.selectValue.lastIndexOf(','));
      this.resultStatus = true;
    },
    submit(type) {
      if (type == 2) {
        this.header(`/pages/shop/order?num=${this.num}&type=${type}&goods_sku_id=${this.goods_sku_id}`);
      } else if (type == 3) {
        uni.showLoading({
          title: '数据加载中'
        });
				console.log(12313);
        api.users
          .show()
          .then((res) => {
            uni.hideLoading();
            if (res.code === 200) {
              let amount = res.data.amount;
              if (amount < this.num * this.exchange_price) {
                this.show('货币不足请更换其它方式');
                return;
              }
              this.header(`/pages/shop/order?num=${this.num}&type=${type}&goods_sku_id=${this.goods_sku_id}`);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    }
  }
};
</script>

<style lang="scss">
.details {
  min-height: 100vh;
  height: 100%;
  background-color: #141414;
}
.content {
  // background: linear-gradient(to bottom, #b8f6e8, #fff);
  /* padding-top: 80rpx; */
  .shade {
    position: fixed;
    height: 100%;
    width: 100vw;
    z-index: -1;
    background-color: #333;
    opacity: 0;
    transition: all 0.5s; //这是滑入划出的动画
    &.show {
      opacity: 0.5;
      z-index: 99;
    }
    &.hidden {
      opacity: 0;
      z-index: -1;
    }
  }
  .goods_box {
    width: 700rpx;
    margin: 30rpx auto 20rpx auto;
    border-radius: 10rpx;
    background-color: #1a1a17;
    display: flex;
    flex-direction: column;
    color: white;
    .goods_info {
      display: flex;
      justify-content: space-between;
      width: 650rpx;
      margin: 20rpx auto 0 auto;
      .goods_price {
        display: flex;
        align-items: center;
        .goods_price_box {
          display: flex;
          align-items: baseline;
          font-weight: bold;
          font-size: 32rpx;
          /* .goods_price_icon,
          .goods_price_dot,
          .goods_price_float {
            font-size: 26rpx;
          }
          .goods_price_int {
            font-size: 40rpx;
          } */
        }
        .goods_price_ext {
          background-color: #292929;
          font-size: 24rpx;
          margin-left: 10rpx;
          padding: 0 10rpx;
          text-align: center;
          color: #b5b5b5;
          border-radius: 5rpx;
        }
      }

      .goods_silver {
        display: flex;
        align-items: center;
        color: red;
        font-size: 40rpx;
        font-weight: 900;
        color: #ded000;
        .gold {
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
        }
      }
    }
    .goods_title {
      width: 650rpx;
      margin: 20rpx auto;
      font-size: 30rpx;
    }
  }
  .goods_detail {
    width: 700rpx;
    margin: 0 auto;
    border-radius: 10rpx;
    background-color: #1a1a17;
    flex-direction: column;
    display: flex;
    color: white;
    .goods_detail_header {
      width: 650rpx;
      margin: 20rpx auto;
    }
    .goods_content {
      width: 650rpx;
      margin: 20rpx auto;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #141414;
    align-items: center;
    height: 120rpx;
    width: 100%;
    padding-bottom: 10rpx;
    .contact_box {
      width: 100rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24rpx;
      margin-left: 30rpx;
      color: #a361f6;
      .contact {
        width: 50rpx;
        height: 60rpx;
      }
    }

    .action_btn {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-right: 30rpx;
      .bottom_btn {
        width: 250rpx;
        height: 80rpx;
        border-radius: 5rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        &.buy_btn {
          background: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small.png');
          background-size: 100% 100%;
          margin-left: 40rpx;
        }
        &.exchange_btn {
          background: url('https://www.dingxians.cn/upload/user_static/shop/exchange.png');
          background-size: 100% 100%;
        }
      }
    }
  }

  .sku {
    transition: all 0.6s; //这是滑入划出的动画
    position: fixed;
    width: 100%;
    bottom: -100%;
    /* border-top-right-radius: 10rpx;
    border-top-left-radius: 10rpx; */
    background: url('https://www.dingxians.cn/upload/user_static/shop/choose-type.png');
    background-size: 100% 100%;
    color: white;
    // overflow: hidden;
    z-index: 100;
    &.show {
      bottom: 0;
    }
    &.hidden {
      bottom: -100%;
    }
    .goods {
      position: relative;
      display: flex;
      padding: 138rpx 48rpx 48rpx;
      .goods_image {
        width: 200rpx;
        height: 200rpx;
      }
      .goods_info {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        height: 200rpx;
        margin-left: 40rpx;
        .original_price {
          color: #ded000;
          font-size: 40rpx;
          display: flex;
          font-size: 24rpx;
          align-items: baseline;
          .original_price_int {
            font-size: 40rpx;
            font-weight: bold;
          }
          .gold {
            width: 30rpx;
            height: 30rpx;
            margin-left: 10rpx;
          }
        }
        .stock {
          font-size: 28rpx;
        }
      }
      .close {
        /* width: 40rpx; */
        position: absolute;
        right: 24rpx;
        top: -48rpx;
        .close_image {
          width: 64rpx;
          height: 64rpx;
        }
      }
    }
    .specs {
      width: 100%;
      padding: 0 48rpx;
      .attr {
        .attr_box {
          display: flex;
          margin: 10px 0;
          .attr_name {
            margin-right: 10px;
            font-size: 13px;
          }
          .attr_info {
            background: red;
            font-size: 10px;
            &.none {
              color: red;
              background: #fff;
            }
          }
        }
        .value {
          display: flex;
          justify-content: flex-start;
          flex-direction: row;
          flex-wrap: wrap;
          font-size: 12px;
          .value_name {
            border-radius: 5px;
            /* background-color: #eee; */
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            padding: 5px 20px;
            margin-right: 5px;
            &.active {
              /* background-color: @color; */
              color: #ded000;
              border: 1px solid #ded000;
            }
          }
        }
      }
    }
    .num_box {
      margin: 56rpx 48rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .num_title {
        font-size: 14px;
        /* margin: 0 10px; */
      }
      .num_value {
        display: flex;
        padding: 0 5px;
        align-items: center;
        .add_num,
        .remove_num {
          width: 20px;
          font-size: 18px;
          display: flex;
          justify-content: center;

          height: 48rpx;
          line-height: 48rpx;
          width: 48rpx;
        }
        .add_num {
          background: url('https://www.dingxians.cn/images/shop/plus.png');
          background-size: 100% 100%;
        }
        .remove_num {
          background: url('https://www.dingxians.cn/images/shop/min.png');
          background-size: 100% 100%;
        }
        .remove_num {
          &.active {
            color: #ccc;
          }
        }
        .num {
          width: 50px;
          /* background-color: #eee; */
          border-top: 1rpx solid #ded000;
          border-bottom: 1rpx solid #ded000;
          text-align: center;

          height: 44rpx;
          line-height: 44rpx;
          font-size: 30rpx;
        }
      }
    }
    .btn_group {
      display: flex;
      margin: 71rpx 70rpx 40rpx;
      .btn {
        width: 100%;
        text-align: center;
        border-radius: 10rpx;
        height: 50px;
        line-height: 50px;
        font-size: 28rpx;
        color: #fff;
        &.exchange {
          /* background-color: @color; */
		  background: url('https://www.dingxians.cn/upload/user_static/shop/btn-exchange.png');
		  background-size: 100% 100%;
        }
        &.buy {
          /* background-color: #31313d; */
		  background: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');
		  background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
